// document.getElementById('test1').innerHTML=document.documentElement.clientWidth+','+document.documentElement.clientHeight;

// =========搜索==========
const searchContent=document.getElementById("search-content");
const searchButton=document.getElementById("search-button");
const searchClose=document.getElementById("search-close");

if(searchButton){
    searchButton.addEventListener('click',function(){
        searchContent.classList.add('show-search');
    })
}

if(searchClose){
    searchClose.addEventListener('click',function(){
        searchContent.classList.remove('show-search');
    })
}

// =========登录==========
const loginContent=document.getElementById("login-content");
const loginButton=document.getElementById("login-button");
const loginClose=document.getElementById("login-close");

if(loginButton){
    loginButton.addEventListener('click',function(){
        loginContent.classList.add('show-login');
    })
}

if(loginClose){
    loginClose.addEventListener('click',function(){
        loginContent.classList.remove('show-login');
    })
}


// ===========home-swiper=========
var homeSwiper = new Swiper ('.home__swiper', {
    loop: true, // 循环模式选项  
    spaceBetween : -24,
    grabCursor:true,
    slidesPerView:'auto',
    centeredSlides:'auto',
    autoplay:{
        delay:3000,
        disableOnInteraction:false,
    },
    breakpoints:{
        1220:{
            spaceBetween:-32,
        }
    }
    
  })     


//   =========header shadow======
const shadowHeader=()=>{
    const header=document.getElementById('header');
    this.scrollY>=50?header.classList.add('shadow-header'):
                    header.classList.remove('shadow-header');
}
window.addEventListener('scroll',shadowHeader)

// ===========featured-swiper=========
var featuredSwiper = new Swiper ('.featured__swiper', {
    loop: true, // 循环模式选项  
    spaceBetween : 16,
    grabCursor:true,
    slidesPerView:'auto',
    centeredSlides:'auto',
    // autoplay:{
    //     delay:3000,
    //     disableOnInteraction:false,
    // },
    
    // 如果需要前进后退按钮
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    breakpoints:{
        1150:{
            centeredSlides:false,
            slidesPerView:3
        }
    }
    
  })     

  // ===========new-swiper=========
var newSwiper = new Swiper ('.new__swiper', {
    loop: true, // 循环模式选项  
    spaceBetween : 16,
    grabCursor:true,
    slidesPerView:'auto',
    // centeredSlides:'auto',
    // autoplay:{
    //     delay:3000,
    //     disableOnInteraction:false,
    // },
    
    breakpoints:{
        788:{
            slidesPerView:2
        },
        1150:{
            slidesPerView:3
        }
    }
    
  })   
  
  
  
  // ===========testimonial-swiper=========
var testimonialSwiper = new Swiper ('.testimonial__swiper', {
    loop: true, // 循环模式选项  
    spaceBetween : 16,
    grabCursor:true,
    slidesPerView:'auto',
    centeredSlides:'auto',
    // autoplay:{
    //     delay:3000,
    //     disableOnInteraction:false,
    // },
    
    breakpoints:{
        1150:{
            slidesPerView:3,
            centeredSlides:false,
        }
    }  
  })   


  //   =========show scroll up======
const showScrollup=()=>{
    const scrollUp=document.getElementById('scroll-up');
    this.scrollY>=350?scrollUp.classList.add('show-scrollup'):
                      scrollUp.classList.remove('show-scrollup');
}
window.addEventListener('scroll',showScrollup)


// ============acitve nav link==========
const sections=document.querySelectorAll('section[id]');

const activeNavLink=()=>{
    const scrollDown=window.scrollY;
    sections.forEach(current=>{
        const sectionHeight=current.offsetHeight,
              sectionTop=current.offsetTop-58,
              sectionId=current.getAttribute('id'),
              sectionClass=document.querySelector('.nav__menu a[href*='+sectionId+']');

        if(scrollDown>sectionTop&&scrollDown<=sectionTop+sectionHeight){
            sectionClass.classList.add('active-link')
        }else{
            sectionClass.classList.remove('active-link');
        }
     });
}
window.addEventListener('scroll',activeNavLink)


// ============toggle theme==========
const themeButton=document.getElementById('theme-button')
const darkTheme='dark-theme'
const iconTheme='ri-sun-line'

const selectedTheme=localStorage.getItem('selected-theme')
const selectedIcon=localStorage.getItem('selected-icon')

const getCurrentTheme=()=>document.body.classList.contains(darkTheme)?'dark':'light';
const getCurrentIcon=()=>themeButton.classList.contains(iconTheme)?'ri-moon-line':'ri-sun-line';

if(selectedTheme){
    document.body.classList[selectedTheme=='dark'?'add':'remove'](darkTheme);
    themeButton.classList[selectedIcon==='ri-moon-line'?'add':'remove'](iconTheme);    
}

themeButton.addEventListener('click',()=>{
    document.body.classList.toggle(darkTheme);
    themeButton.classList.toggle(iconTheme);

    localStorage.setItem('selected-theme',getCurrentTheme());
    localStorage.setItem('selected-icon',getCurrentIcon());

})



